<template>
  <div class="classify">
    <div class="classify-top">
      <input type="text" placeholder="回车搜索商品" />
    </div>
    <div class="list-content">
      <div class="list_left">
        <NavLeft
          class="left_nvs"
          v-for="(item, index) in onelist"
          :key="index"
          :item="item"
          :index="index"
          :selectIndex="selectIndex"
          @change="change(index, item)"
        />
      </div>
      <div class="list_right">
        <div class="right">
            <Swiper :images="images"></Swiper>
          <div class="right-t">
            <NavRight
              v-for="(item, index) in twolist"
              :key="index"
              :item="item"
              @goClass="goDetail(item, index)"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
// 轮播图
import Swiper from "../components/swiper/Swiper copy";
import NavLeft from "./classifyItem/Nav_left";
import NavRight from "./classifyItem/Nav_right";
export default {
  components: {
    Swiper,
    NavLeft,
    NavRight,
  },
  data() {
    return {
      images: [
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1069484961,2860351051&fm=26&gp=0.jpg",
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=3494960851,1480285429&fm=26&gp=0.jpg",
        "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=2248245180,1048085932&fm=26&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=1134302223,3860137916&fm=26&gp=0.jpg",
        "https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3030325702,1144960403&fm=26&gp=0.jpg",
        "https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2997777344,2470881973&fm=26&gp=0.jpg",
      ],
      onelist: [],
      twolist: [],
      allData: [],
      selectIndex: 0,
    };
  },
  mounted() {
    this.$CLIENT.getClassify().then((res) => {
      this.onelist.push({ name: "全部展示" });
      this.allData = res.data.data;
      res.data.data.map((el) => {
        if (el.pid === 0) {
          this.onelist.push(el);
        }
        if (el.pic !== 0) {
          this.twolist.push(el);
        }
      });
    });
  },
  methods: {
    change(index, item) {
      this.selectIndex = index;
      this.twolist = [];
      if (item.name === "全部展示") {
        this.twolist = this.allData;
      } else {
        this.allData.map((el) => {
          if (el.pid === item.id) {
            this.twolist.push(el);
          }
        });
      }
    },
    goDetail(item, index) {
      this.$router.goNext({ path: "/classifyDetail", query: { id: item.id } });
    },
  },
};
</script>

<style scoped>
.classify-top {
  width: 100%;
  height: 64px;
  background: white;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #eee;
}
.classify-top input {
  width: 220px;
  height: 50%;
  background: #eee;
  text-indent: 1em;
  border: none;
  border-radius: 15px;
  outline: none;
}
.classify-top input::placeholder {
  text-indent: 1em;
}
.list-content {
  width: 100%;
  background: white;
  height: 84vh;
  display: flex;
  justify-content: space-between;
}
.list_left {
  /* overflow: hidden; */
  width: 25%;
  /* height: 4rem; */
  /* background: springgreen; */
  box-sizing: border-box;
  border-right: 1px solid #eee;
}
.list_right {
  width: 75%;
  height: 100%;
}
.right {
  width: 100%;
  height: 100%;
  overflow: hidden;
  overflow: scroll;
}
.right-t {
  display: flex;
  flex-wrap: wrap;
}
</style>